<template>
    <div class="wenzhangbang-content">
        <div class="wenzhangbang-header">
            <div class="wenzhangbang-title">
                <img src="../../../assets/img/image.png" alt="">
                <span>文章榜</span>
            </div>
            <div class="wenzhangbang-title-right" @click="handleHuanYiHuan">
                <span class="iconfont icon-huanyihuan"></span>
                <span class="wenzhangbanghuanyihuan">换一换</span>
            </div>
        </div>
        <div class="wenzhangbang-xiahuaxian"></div>
        <div class="wenzhangbang-content">
            <div v-for="item in wenzhangbanglists" :key="item.id" class="wenzhangbang-contentlist">
                <div class="wenzhangbang-span"><span class="gradient-text gartextcolor-1">{{ item.id }}</span></div>
                <div class="wenzhangbang-content-content">{{ item.content }}</div>
            </div>
        </div>
        <div class="wenzhangbang-xiahuaxian"></div>
        <div class="wenzhangbang-chakangengduo">
            <a href="#">
                <span>查看更多</span>
                <span class="iconfont icon-xiangyoujiantou"></span>
            </a>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getnewwenzhangbangLists, getwenzhangbangLists } from '@/util/getapi';
import { onMounted, ref } from 'vue';
import type { wenzhangbanglistsType } from '../../../util/data';

const wenzhangbanglists = ref<wenzhangbanglistsType>([]);

onMounted(async () => {
    try {
        const wenzhangbanglistget = await getwenzhangbangLists();
        if (wenzhangbanglistget) {
            wenzhangbanglists.value = wenzhangbanglistget;
        }
    } catch (error) {
        console.error('Failed to fetch wenzhangbanglists:', error);
    }
});

const handleHuanYiHuan = async () => {
    const wenzhangbanglistget = await getwenzhangbangLists();
    const newwenzhangbanglistget = await getnewwenzhangbangLists();

    if (wenzhangbanglists.value == wenzhangbanglistget) {
        wenzhangbanglists.value = newwenzhangbanglistget;
        return
    }
    if (wenzhangbanglists.value == newwenzhangbanglistget) {
        wenzhangbanglists.value = wenzhangbanglistget;
        return
    }
};

</script>

<style lang="scss" scoped>
@import url(../../../assets/rightcontent/wenzhangbang.scss);
@import url(../../../assets/rightcontent.scss);
</style>